<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <!-- 场景：如果用户在点击某个页面，还没等到响应结果时，用户就跳转到新的页面了，就可以取消上一个页面的请求 -->
    <h1>取消请求练习</h1>
    <input type="text" id="ipt">
    <button id="btn">提交</button>
    <button id="cancelBtn">取消请求</button>

    <script>
        const ipt =document.querySelector('#ipt')
        const btn =document.querySelector('#btn')
        const cancelBtn =document.querySelector('#cancelBtn')
        const CancelToken = axios.CancelToken //axios身上有一个构造函数CancelToken

        let cancel = null//不能用const声明，因为const声明的之后不能再重新赋值

        //如果一个请求需要取消，就在这个请求的配置对象里，配置一个cancelToken（c小写，T大写）的配置项，值是CancelToken（c大写，T大写）的实例对象
        btn.onclick = async function(){
            try {
                  const re = await axios.get('/getLazy',{
                    params:{
                        userId:'001'
                    },
                    cancelToken: new CancelToken((c)=>{//CancelToken的实例对象接收一个回调函数作为参数
                        //当请求发送的时候，这个回调函数会被执行，且接收一个参数，这个参数是可以取消当前请求的函数
                         cancel=c//让外面取消的点击事件可以拿到这个函数，所以定义全局变量cancel，当请求发送时，给cancel赋值为这个取消请求的函数c
                    })
                  })  
                  console.log(re)

            }catch(e){
                console.log(e.message, "出现错误");
            }
        }

    cancelBtn.onclick =function(){
        cancel() //点击就取消请求
    }

    </script>
</body>
</html>